<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>米事见 - 热点舆情监测平台</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!--Morris Chart CSS -->
<!--    <link rel="stylesheet" href="static/css/morris.css">-->

    <link href="static/css/jquery.bootstrap-touchspin.min.css" rel="stylesheet">
    <link href="static/css/bootstrap-datepicker.min.css" rel="stylesheet">


    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="static/css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div class="header-bg">
        <!-- Navigation Bar-->
        <header id="topnav">
            <div class="topbar-main">
                <div class="container-fluid">

                    <!-- Logo-->
                    <div>
                        <a href="#" class="logo">
                            <img src="static/picture/logo-mi.png" class="logo-lg" alt="" height="60">
                        </a>
                    </div>
                    <!-- End Logo-->

                    <div class="menu-extras topbar-custom navbar p-0">

                        <!-- Search input -->
                        <div class="search-wrap" id="search-wrap">
                            <div class="search-bar">
                                <input class="search-input" type="search" placeholder="Search">
                                <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                    <i class="mdi mdi-close-circle"></i>
                                </a>
                            </div>
                        </div>

                        <ul class="navbar-right ml-auto list-inline float-right mb-0">

                            <!-- full screen -->
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                    <i class="fas fa-expand noti-icon"></i>
                                </a>
                            </li>

                          

                            <li class="dropdown notification-list list-inline-item">
                                <div class="dropdown notification-list nav-pro-img">
                                    <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user" href="http://localhost:3000" role="button" aria-haspopup="false" aria-expanded="false">
                                        <img src="static\picture\ai.png" alt="user" class="rounded-circle">
                                    </a>
                                    
                                </div>
                            </li>

                            <li class="menu-item dropdown notification-list list-inline-item">
                                <!-- Mobile menu toggle-->
                                <a class="navbar-toggle nav-link">
                                    <div class="lines">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                                <!-- End mobile menu toggle-->
                            </li>

                        </ul>

                    </div>
                    <!-- end menu-extras -->

                    <div class="clearfix"></div>

                </div>
                <!-- end container -->
            </div>
            <!-- end topbar-main -->

            <!-- start content -->
            <div class="bg-dark">
                <div class="container-fluid">
                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">总览</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active">Welcome to 米事见平台</li>
                                </ol>
                            </div>
                        </div>

                        <div class="col-md-4 d-flex flex-row">
                            <div class="col-md-6 align-self-center" style="color:aliceblue">
                                <h6>查询每日详情:</h6>
                            </div>
                            <div class="float-right d-none d-md-block app-datepicker ml-auto">
                                <input type="text" class="form-control" data-date-format="MM dd, yyyy" readonly="readonly" id="datepicker">
                                <i class="mdi mdi-chevron-down mdi-drop"></i>
                            </div>
                        </div>
                    </div>

                    <div class="row top-content">
                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">话题总数</h5>
                                    <h4 class="text-info pt-1 mb-0"><div id="count_contents"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart1"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">评论总数</h5>
                                    <h4 class="text-warning pt-1 mb-0"><div id="count_comment"></div></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart2"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">转发总数</h5>
                                    <h4 class="text-primary pt-1 mb-0"><div id="count_repost"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart3"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">

                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">点赞总数</h5>
                                    <h4 class="text-danger pt-1 mb-0"><div id="count_like"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end content -->

            <!-- MENU Start -->
            <div class="navbar-custom">
                <div class="container-fluid">

                    <div id="navigation">

                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">

                            <li class="has-submenu">
                                <a href="index.html"><i class="dripicons-meter"></i> 首页</a>
                            </li>

                            <li class="has-submenu">
                                <a href="contents.html"><i class="dripicons-briefcase"></i> 内容分析</a>
                                <ul class="submenu">
                                            <li><a href="contents.html">帖子</a></li>
                                            <li><a href="topicresearch.html">话题</a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="blogger.html"><i class="dripicons-broadcast"></i> 权威博主</a>
                                <!-- <ul class="submenu">
                                            <li><a href="blogger.html">权威博主</a></li>
                                            <li><a href="sentiment-graph.html">舆情拓扑</a></li>
                                </ul> -->
                            </li>

                            <li class="has-submenu">
                                <a href="user.html"><i class="dripicons-view-thumb"></i> 用户分析</a>
                                <!-- <ul class="submenu">
                                            <li><a href="user.html">用户分析</a></li>
                                            <li><a href="#">暂无</a></li>
                                            <li><a href="#">暂无</a></li>
                                </ul> -->
                            </li>
                        </ul>
                        <!-- End navigation menu -->
                    </div>
                    <!-- end #navigation -->
                </div>
                <!-- end container -->
            </div>
            <!-- end navbar-custom -->
        </header>
        <!-- End Navigation Bar-->

    </div>
    <!-- header-bg -->

    <div class="wrapper">
        <div class="container-fluid">

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="mt-0 header-title">热度曲线</h4>
                                    <div class="input-group" style="width: 30%;left:70%;;">
                                        <input type="text" class="form-control" id="start" placeholder="Start Date">
                                        <input type="text" class="form-control" id="end" placeholder="End Date">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" id="fetchData">确定</button>
                                        </div>
                                </div>
                            
                            <div id="Hotchart" style="height: 300%;width:100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title mb-4">近日热帖</h4>
                            <div class="activity-feed-container" style="height: 480px; overflow-y: auto; padding-right: 15px;">
                                <ol class="activity-feed mb-0 pl-3">
                                    <!-- 列表项内容 -->
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="card bg-dark">
                        <div class="card-body">

                            <h4 class="mt-0 text-white header-title">词云图</h4>
                            <ol class="activity-feed mb-0 pl-3" style="height: 500px">
                            <div id="wordcloud-container" style="height:500px;width: 100%;"></div>
                            </ol>

<!--                            <div id="morris-line-example-dark" class="morris-charts" style="height: 300px"></div>-->

                        </div>
                    </div>
                </div>
            </div>


<!---->


        </div>
        <!-- end container-fluid -->
    </div>
    <!-- end wrapper -->


    <!-- jQuery  -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/jquery.slimscroll.js"></script>
    <script src="static/js/waves.min.js"></script>

    <!-- Plugins js -->
    <script src="static/js/apexcharts.min.js"></script>
    <script src="static/js/bootstrap-datepicker.min.js"></script>

    <script src="static/js/bootstrap-maxlength.min.js"></script>
    <script src="static/js/jquery.bootstrap-touchspin.min.js"></script>





    <script src="static/js/app.js"></script>
    <script src="static/js/echarts.min.js"></script>
    <script src="static/js/echarts-wordcloud.js"></script>
    <script src="static/js/axios.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
    // 找到日期选择器的元素
    const datepickerInput = document.getElementById('datepicker');

    // 设置日期为5月8日
    datepickerInput.value = 'May 08, 2024'; // 根据你的日期格式进行设置

    // 初始化日期选择器
    $(datepickerInput).datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'MM dd, yyyy' // 日期格式要与显示格式一致
    });

    // 加载5月8日对应的数据
    loadData('2024-05-08');

    // 监听日期选择变化事件
    $(datepickerInput).on('changeDate', function(e) {
        const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
        loadData(selectedDate); // 加载新日期对应的数据
    });
});
        // const countDate = '2024-05-08'
        document.addEventListener("DOMContentLoaded", function() {
    const datepickerInput = document.getElementById('datepicker');

    // 初始化日期选择器
    $(datepickerInput).datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'yyyy-mm-dd' // 日期格式要与后端API期望的格式一致
    });

    // 获取默认日期
    // const defaultDate = getDefaultDate();
    const defaultDate = '2024-05-08';

    // 加载默认日期对应的数据
    loadData(defaultDate);

    // 监听日期选择变化事件
    $(datepickerInput).on('changeDate', function(e) {
        const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
        loadData(selectedDate); // 加载新日期对应的数据
    });

    // 获取默认日期的函数
    function getDefaultDate() {
        const today = new Date();
        const year = today.getFullYear();
        const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份补零
        const day = today.getDate().toString().padStart(2, '0'); // 日补零
        return `${year}-${month}-${day}`;
    }

    // 加载数据的函数
    function loadData(date) {
        const apiUrl = `http://localhost:8080/hot/countlist?Date=${date}`;

        // 发起GET请求获取数据
        axios.get(apiUrl)
            .then(response => {
                const countList = response.data[0];

                // 更新页面上对应的数据显示
                updateDataDisplay(countList);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                // 处理请求错误
                const emptyData = {
                    count_comment: 0,
                    count_repost: 0,
                    count_like: 0,
                    count_contents: 0
                };
                updateDataDisplay(emptyData);
            });
    }

    // 更新数据显示的函数
    function updateDataDisplay(data) {
        const commentElement = document.getElementById('count_comment');
        const repostElement = document.getElementById('count_repost');
        const likeElement = document.getElementById('count_like');
        const contentsElement = document.getElementById('count_contents');

        commentElement.innerText = data.count_comment || 0;
        repostElement.innerText = data.count_repost || 0;
        likeElement.innerText = data.count_like || 0;
        contentsElement.innerText = data.count_contents || 0;
    }
});

    </script>

    <script>
       // 使用 Axios 发起 GET 请求获取词频数据
    axios.get('http://localhost:8080/freq/list')
    .then(response => {
        const wordFrequency = response.data;

        // 转换词频数据为 ECharts 词云图所需的格式
        const wordCloudData = wordFrequency.map(item => ({
            name: item.word,
            value: item.frequency
        }));

        // 渲染词云图
        renderWordCloud(wordCloudData);
    })
    .catch(error => {
        console.error('Error fetching word frequency data:', error);
    });

// 渲染词云图函数
function renderWordCloud(data) {
    // 初始化 ECharts 实例
    const myChart = echarts.init(document.getElementById('wordcloud-container'));

    // 配置词云图选项
    const option = {
    tooltip: {},
    series: [{
        type: 'wordCloud',
        gridSize: 10,
        sizeRange: [16, 60],
        rotationRange: [-90, 90],
        shape: 'circle',
        textStyle: {
            normal: {
                fontFamily: 'Roboto, Arial, sans-serif', // 使用更现代的字体
                fontWeight: 'bold',
                color: function () {
                    // 返回渐变色，可根据需求自定义
                    return 'rgb(' + [
                        Math.round(Math.random() * 50),
                        Math.round(Math.random() * 300),
                        Math.round(Math.random() * 400)
                    ].join(',') + ')';
                }
            }
        },
        data: data
    }],
    shadowBlur: 10,
    shadowColor: 'white'
};
    
    // 使用配置项显示词云图
    myChart.setOption(option);
}

    </script>
    <script>

        const startDate = '2024-03-01';
        const endDate = '2024-05-01';

        axios.get(`http://localhost:8080/hot/list?startDate=${startDate}&endDate=${endDate}`)
            .then(response => {
                const data = response.data;
                console.log(data)

                // Extract dates and hotness from the response
                const dates = data.map(item => item.date);
                const hotness = data.map(item => item.hotness);

                // Preprocess data to ensure all dates between startDate and endDate are covered
                const processedData = fillMissingDates(startDate, endDate, dates, hotness);

                // Initialize ECharts instance
                console.log(document.getElementById('Hotchart'))

                const chart1 = echarts.init(document.getElementById('Hotchart'));

                // Configure chart options
                const options = {
                    visualMap: { // 添加视觉映射组件
                    show: false,
                    min: 0,
                    max: 100,
                    calculable: true,
                    inRange: {
                        color: ['#d94e5d', '#eac736', '#50a3ba'] // 自定义颜色范围
                    }
                },
                    title: {
                        text: '',
                        textStyle: {
                            color: '#333', // 标题颜色
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: processedData.dates,
                        axisLabel: {
                            rotate: 45, // x 轴标签旋转角度
                            color: '#666' // 标签颜色
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc' // x 轴线颜色
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#ccc' // y 轴线颜色
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed' // 分隔线类型
                            }
                        }
                    },
                    series: [{
                    data: processedData.hotness,
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: 'skyblue',
                        width: 3
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(135, 206, 235, 0.7)' // 渐变色起始颜色
                        }, {
                            offset: 1,
                            color: 'rgba(135, 206, 235, 0)' // 渐变色结束颜色
                        }])
                    }
                }],
                    tooltip: {
                    trigger: 'axis', // 鼠标悬停触发提示
                    axisPointer: {
                        type: 'line', // 指示器类型为直线
                        lineStyle: {
                            color: '#ccc',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    formatter: function(params) {
                        // 自定义提示框内容
                        const date = params[0].axisValue; // x 轴数值
                        const hotness = params[0].data; // y 轴数值
                        return `${date}<br/>热度：${hotness}`;
                    }
                },
                    animation: true, // 开启动画
                    animationDuration: 1000, // 动画时长（毫秒）
                    animationEasing: 'cubicInOut' ,// 缓动效果
                    
                };


                // Set chart options and render the chart
                chart1.setOption(options);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });

        // Function to fill missing dates with default hotness value of 0
        function fillMissingDates(startDate, endDate, dates, hotness) {
        const currentDate = new Date(startDate);
        const endDateObj = new Date(endDate);
        const processedDates = [];
        const processedHotness = [];

        while (currentDate <= endDateObj) {
        const currentDateStr = currentDate.toISOString().slice(0, 10); // Get date string (YYYY-MM-DD)
        processedDates.push(currentDateStr);

        // Find hotness value for the current date, defaulting to 0 if not found
        const dataIndex = dates.indexOf(currentDateStr);
        if (dataIndex !== -1) {
        processedHotness.push(hotness[dataIndex]);
        } else {
        processedHotness.push(0);
        }

        // Move to the next day
        currentDate.setDate(currentDate.getDate() + 1);
        }

        return { dates: processedDates, hotness: processedHotness };
        }

    </script>
<script>
    // 使用 Axios 发送 GET 请求获取数据
    axios.get('http://localhost:8080/hot/hotcontents')
        .then(function (response) {
            // 请求成功后执行的操作
            const data = response.data; // 获取返回的数据

            // 找到需要填充数据的位置
            const feedList = document.querySelector('.activity-feed');
            

            // 清空现有的列表内容
            feedList.innerHTML = '';

            // 遍历返回的数据，生成列表项并填充到页面中
            data.forEach(function (item) {
                const listItem = document.createElement('li');
                listItem.classList.add('feed-item');

                // 处理 topics 字符串，去除单引号并生成话题链接
                const topicsArray = item.topic.split(', '); // 按单引号和逗号分割字符串
                console.log(topicsArray)
                let topicsContent = '';
                topicsArray.forEach(function (topic) {
                    // 去除单引号
                    const trimmedTopic = topic.replace(/'/g, ' ');
                    // 生成话题链接
                    const topicLink = `https://s.weibo.com/weibo?q=%23${encodeURIComponent(trimmedTopic)}%23`;
                    // 拼接话题内容及链接
                    topicsContent += `<a href="${topicLink}" target="_blank">${trimmedTopic}</a> `;
                });

                const itemContent = `
                <div style="display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #ddd; padding: 0px;">
            <div style="max-width: calc(100% - 100px); overflow: hidden;">
                <p style="margin: 0; font-weight: bold;">${item.user_name}</p>
                <p style="margin: 7px 0;">${topicsContent}</p>
                <p style="margin: 7px 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">${item.contents}</p>
            </div>
            <div style="flex-shrink: 0; width: 90px; text-align: right;">
                <b class="text-primary">${item.hotness}</b>
            </div>
        </div>
                `;

                listItem.innerHTML = itemContent;
                feedList.appendChild(listItem);
            });
        })
        .catch(function (error) {
            // 请求失败后执行的操作
            console.error('Error fetching data:', error);
        });
</script>



</body>

</html>